<template>
	<view class="address-edit">
		<form @submit="formSubmit" report-submit="true">
			<view class="form bg-white">

				<!-- 				<view class="form-item row md">
					<view class="label ">身份证号</view>
					<input v-model="accountObj.idCardEncrypted" placeholder="请输入身份证号"></input>
				</view> -->
				<view class="form-item row md">
					<view class="label ">支付宝账号</view>
					<input v-model="accountObj.zfbAccount" placeholder="请输入支付宝账号"></input>
				</view>
				<view class="form-item row md">
					<view class="label">真实姓名</view>
					<input v-model="accountObj.zfbName" placeholder="请输入真实姓名"></input>
				</view>
				<!-- 				
				<view class="form-item row md">
					<view class="label ">开户行</view>
					<input v-model="accountObj.branchName" placeholder="请输入银行开户行"></input>
				</view>
				<view class="form-item row md">
					<view class="label ">银行名称</view>
					<input v-model="accountObj.bankName" placeholder="请输入银行名称"></input>
				</view>
				<view class="form-item row md">
					<view class="label ">手机号</view>
					<input v-model="accountObj.phoneEncrypted" placeholder="请输入手机号"></input>
				</view>
				<view class="form-item row md" @click="addressShow = true;">
					<view class="label ">地区</view>
					<view class="" style="font-size: 28rpx;color: grey;">
						{{ address ? address : '请选择地区' }}
					</view>
				</view> -->
			</view>
			<view class="mt10 mb10 bg-white check-wrap">
				<radio-group class="row" @click="ChangeIsDefault(accountObj.isDefault)">
					<radio id="checkbox" style="border-radius: 50%;transform:scale(0.7)"
						:checked="accountObj.isDefault ? true : false" color="#FF2C3C" />
					<label for="checkbox">
						<text>设置为默认</text>
					</label>
				</radio-group>
			</view>
			<button class="my-btn bg-primary white br60" form-type="submit">完成</button>
		</form>
		<address-picker :show="addressShow" closeOnClickOverlay @confirm='confirmAddress' @cancel='addressShow=false'
			@close='addressShow = false' :address-data="addressData" :indexs="indexs" :type="2"></address-picker>
	</view>
</template>

<script>
	import {
		addAccount,
		editAccount,
		selectBankListApi
	} from '@/api/index.js';
	export default {
		data() {
			return {
				address: '',
				addressShow: false,
				indexs: [0, 0, 0],
				addressData: [],
				accountObj: {
					userId: uni.getStorageSync('UserInfo').userId,
					zfbName: '', //姓名
					zfbAccount: '', //支付宝账号
					isDefault: 0, //是否默认
				},
				accountId: ''
			};
		},
		onLoad(options) {
			console.log(options, 'options');
			if (options.id) {
				this.accountId = options.id;
				this.selectBankList();
			}
		},
		methods: {
			// 默认
			ChangeIsDefault(val) {
				console.log(val, 'val');
				this.accountObj.isDefault = !this.accountObj.isDefault;
			},
			// 查询银行列表
			async selectBankList() {
				const res = await selectBankListApi(uni.getStorageSync('UserInfo').userId);
				console.log(res.data, 'res-查询银行列表');
				if (res.code === 200 && res.data.length > 0) {
					const filterItem = res.data.filter((item) => item.id == this.accountId);
					console.log(filterItem, 'filterItem');
					this.accountObj = filterItem[0];
					this.address = filterItem[0].province + filterItem[0].city
				}
			},
			confirmAddress(val) {
				console.log(val);
				this.accountObj.province = val.value[0];
				this.accountObj.city = val.value[1];
				this.address = val.value[0] === val.value[1] ? val.value[0] : val.value[0] + val.value[1]
				this.addressShow = false
			},
			formSubmit() {
				if (!this.accountObj.zfbAccount) return this.$modal.msg("请填写支付宝账号")
				if (!this.accountObj.zfbName) return this.$modal.msg("请填写真实姓名")
				// if (!this.accountObj.isDefault) return this.$modal.msg("请选择是否默认")
				// if (!this.accountObj.branchName) return this.$modal.msg("请填写开户行")
				// if (!this.accountObj.bankName) return this.$modal.msg("请填写银行名称")
				// if (!this.accountObj.phoneEncrypted) return this.$modal.msg("请填写手机号")
				// if (!this.accountObj.province) return this.$modal.msg("请选择地区")
				const newParams = JSON.parse(JSON.stringify(this.accountObj));
				newParams.isDefault = newParams.isDefault ? 1 : 0;
				if (this.accountId) {
					editAccount(newParams).then(res => {
						console.log(res, 'res');
						if (res.code == 200) {
							uni.showToast({
								title: '修改成功',
							})
							this.selectBankList();
						}
					}).catch(err => {
						uni.showToast({
							title: err.msg,
							icon: 'none'
						})
					});
				} else {
					addAccount(newParams).then(res => {
						console.log(res);
						if (res.code == 200) {
							uni.showToast({
								title: '添加成功',
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					}).catch(err => {
						console.log(err, 'err');
						uni.showToast({
							title: err.msg,
							icon: 'none'
						})
					});
				}
			},



		}
	}
</script>

<style lang="scss">
	.address-edit {
		padding-top: 10rpx;

		.form {
			flex: 1;

			.form-item {
				padding: 0 24rpx;
				height: 80rpx;

				&:not(:nth-of-type(10)) {
					border-bottom: $-solid-border;
				}

				.label {
					width: 160rpx;
				}

				input {
					height: 100%;
					flex: 1;
				}
			}
		}

		.check-wrap {
			padding: 20rpx;
		}

		.my-btn {
			margin: 30rpx 26rpx;
			text-align: center;
		}
	}

	van-field view {
		height: 100%;
	}

	van-field textarea {
		height: 100% !important;
		padding-top: 10rpx !important;
	}

	.van-cell {
		padding: 20rpx !important;
	}

	.van-field__body--textarea,
	.van-field__input {
		margin-left: 15rpx;
	}
</style>